
<template>
<section>
       <!-- 面包屑区域 -->
    <Alert class="padding-15" show-icon>操作提示：带有”<span class="color-danger">*</span>“的选项为必填项，其他为选填项。</Alert>
    <article class="bg-fff padding-20">
        <Form  ref="form" :model="formData" :label-width="160">
            <FormItem prop="organizationId" label="充值账户组织:"  :rules="required">
                <Select  v-model="formData.organizationId" filterable clearable class="width-35per" @on-change='getOverview'>
                    <Option v-for="item in getSysAllList" :value="item.value" :key="item.value">{{item.label}}</Option>
                </Select>
                <span class="color-success" v-show="avAmount!==-1">可用余额:{{avAmount}} USD</span>
            </FormItem>
            <FormItem prop="arrivalDate" label="资金到账日期:"  :rules="required">
                <DatePicker type="date"  v-model="formData.arrivalDate" class="width-35per"></DatePicker>
            </FormItem>
            <FormItem prop="amount" label="充值金额:"  :rules="required">
                <InputNumber  v-model="formData.amount" class="width-35per" :min="0"/> USD
            </FormItem>
            <FormItem label="备注:">
                <Input  v-model="formData.remark" type='textarea' class="width-35per"/>
            </FormItem>
             <FormItem>
                <Button type="primary" @click="submit">立即充值</Button>
                <Button class="margin-left-10" @click="close">返回</Button>
                <Spin size="large" fix v-if="loading"></Spin>
            </FormItem>
        </Form>
    </article>
    
</section>
     
</template>

<script>
import DateFormat from '@/utils/date';
import { mapGetters } from 'vuex'
import { HttpAddAMRecharge, HttpFinanceRemaind } from '@/service/api/views';
export default {

    data() {
        return {
            avAmount: -1,
            loading: false,
            formData: {
                organizationId: '',
                amount: "",
                arrivalDate: "",
                remark: "",
            },
            required: [{
                required: true,
                message: "该信息不能为空,请填写"
            }],
        };
    },

    computed: {
        ...mapGetters('dictionary', ['getSysAllList']),
    },
    methods: {
        close() {
            this.$router.push({ name: "rechargelist" });
        },
        async submit() {
            let valid = await this.$refs['form'].validate();
            if (!valid) return;
            this.loading = true;
            let formData = { ...this.formData };
            formData.arrivalDate = DateFormat(formData.arrivalDate, 'yy-mm-dd');
            formData.organizationName = this.getSysAllList.filter(item=>{ return item.value == this.formData.organizationId})[0].label;
            HttpAddAMRecharge(formData).then(res => {
                this.$Message.success(res.message);
                this.close();
            }, err => {
                this.$Message.error(err.message);
            }).finally(result => {
                this.loading = false;
            })
        },
        //获取可用余额
        async getOverview(val) {
            HttpFinanceRemaind({
                page: 1,
                rows: 1000,
                sidx: 'id',
                sord: 'desc',
                search: {
                    EQ_organizationId: val.split('$')[0] || ''
                }
            }).then(res => {
                const data = res.data.content[0] || { availableAmount: 0 }
                this.avAmount = data.availableAmount;
            }, err => {

            })
        },


    },
};
</script>
